<template>
  <div id="search">
    <div class="search-wrapper">
      <a href="javascript:history.back(-1)" class="goBack">
        <svg
          viewBox="0 0 512 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          class="_25Czv6Mk"
        >
          <path
            d="M525.89 1021.75a24.63 24.63 0 0 1-17.21-7L8.51 529.45a24.72 24.72 0 0 1 0-35.48L508.68 8.64a24.72 24.72 0 0 1 34.42 35.49L61.21 511.71l481.9 467.59a24.72 24.72 0 0 1-17.21 42.46z m0 0"
            fill="#9c9c9c"
          ></path>
        </svg>
      </a>
      <van-search placeholder="商品搜索"></van-search>
      <span class="search-btn" @click="fn_btn">搜索</span>
    </div>
    <div class="search-view">
      <h2>
        <p>
          <svg
            class="f3fnU1zy"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            width="200"
            height="200"
          >
            <path
              d="M705.451 355.465a27.2 27.2 0 0 0 0-26.101c-7.208-13.18-23.735-18.021-36.915-10.814L477.234 423.164a136.005 136.005 0 0 0-54.071 54.07L318.55 668.535a27.2 27.2 0 0 0 0 26.101c7.208 13.18 23.735 18.022 36.915 10.814l191.301-104.614a135.993 135.993 0 0 0 54.07-54.071l104.615-191.3zM512 1022C230.335 1022 2 793.665 2 512S230.335 2 512 2s510 228.334 510 510-228.334 510-510 510z"
              fill="#d2d2d2"
            ></path>
          </svg>
          搜索发现
        </p>
      </h2>
      <div class="hid" @click="fn_show">
        <span v-show="isShow">
          <svg
            viewBox="345 390 15.9 11"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            preserveAspectRatio="none"
            class="w9ZnqxOW"
          >
            <path
              d="M352.861318,390 C355.937983,390 358.46128,391.423369 360.400006,394.233478 L360.400006,394.233478 L360.575408,394.49404 C360.982038,395.112858 360.982959,395.88702 360.577801,396.506649 C358.628766,399.487417 356.045051,401 352.861318,401 C349.756885,401 347.270603,399.561026 345.438279,396.721861 L345.438279,396.721861 L345.272953,396.458898 C344.908171,395.863418 344.909072,395.13642 345.275328,394.541702 C347.130255,391.529721 349.671517,390 352.861318,390 Z M352.861318,390.781212 C349.997226,390.781212 347.728369,392.146958 346.016953,394.925911 C345.797198,395.282744 345.796657,395.718946 346.013158,396.072418 L346.013158,396.072418 L346.173681,396.327744 C347.856995,398.935974 350.07346,400.218788 352.861318,400.218788 C355.727223,400.218788 358.044342,398.862278 359.847337,396.104858 C360.090431,395.73308 360.089879,395.268583 359.848298,394.900896 L359.848298,394.900896 L359.677771,394.647573 C357.890187,392.056578 355.629263,390.781212 352.861318,390.781212 Z M352.861318,392.500527 C354.507757,392.500527 355.842459,393.835977 355.842459,395.483338 C355.842459,397.130698 354.507757,398.466148 352.861318,398.466148 C351.214879,398.466148 349.880177,397.130698 349.880177,395.483338 C349.880177,393.835977 351.214879,392.500527 352.861318,392.500527 Z M352.861318,393.352759 C351.68529,393.352759 350.731932,394.306651 350.731932,395.483338 C350.731932,396.660024 351.68529,397.613917 352.861318,397.613917 C354.037346,397.613917 354.990705,396.660024 354.990705,395.483338 C354.990705,394.306651 354.037346,393.352759 352.861318,393.352759 Z"
              fill="#d2d2d2"
            ></path>
          </svg>
        </span>
        <span v-show="!isShow">
          <svg
            viewBox="345 390 15.43 12"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            preserveAspectRatio="none"
            class="w9ZnqxOW"
          >
            <path
              d="M358.916107,390.08789 L358.984866,390.145304 C358.984932,390.14537 358.984997,390.145435 358.985063,390.145501 C359.178987,390.339534 359.178987,390.654008 358.985063,390.848041 L357.768044,392.065434 C358.492328,392.682444 359.16031,393.44932 359.771015,394.364816 L359.961256,394.657739 L360.13166,394.93389 C360.526705,395.589731 360.5276,396.410209 360.133985,397.066911 C358.240479,400.226014 355.730375,401.829093 352.637347,401.829093 C351.279501,401.829093 350.043381,401.51997 348.932161,400.905476 L347.984763,401.854499 C347.812511,402.026848 347.545057,402.046067 347.351572,401.91211 L347.282617,401.854499 L347.282617,401.854499 C347.088692,401.660466 347.088692,401.345992 347.282617,401.151959 L358.282916,390.145501 C358.455168,389.973152 358.722623,389.953933 358.916107,390.08789 Z M357.182056,392.652861 L355.195377,394.639891 C355.41123,395.045466 355.533555,395.50844 355.533555,396 C355.533555,397.600427 354.236878,398.897829 352.637347,398.897829 C352.146062,398.897829 351.683347,398.775436 351.277999,398.559462 L349.5452,400.293289 C350.481796,400.766272 351.511622,401.001142 352.637347,401.001142 C355.421602,401.001142 357.672705,399.563474 359.424332,396.641081 C359.63426,396.29084 359.657161,395.862956 359.494822,395.498507 L359.425266,395.365087 L359.259597,395.096608 C358.628361,394.098494 357.936371,393.284595 357.182056,392.652861 Z M352.637347,390.170977 C353.896354,390.170977 355.05998,390.438619 356.125959,390.971003 L355.504659,391.592775 C354.619521,391.196084 353.664358,390.998928 352.637347,390.998928 C349.854854,390.998928 347.650637,392.446385 345.987979,395.391599 C345.798207,395.727761 345.776706,396.130385 345.921994,396.478815 L345.984292,396.6067 L346.140242,396.877302 C346.682152,397.793303 347.280937,398.555057 347.937949,399.164207 L347.354005,399.750135 C346.718354,399.156444 346.135375,398.436381 345.605921,397.590953 L345.425792,397.294998 L345.265176,397.016302 C344.910787,396.385196 344.911663,395.614702 345.267484,394.984403 C347.069564,391.792219 349.538424,390.170977 352.637347,390.170977 Z M354.571732,395.264694 L351.902452,397.935468 C352.130815,398.022323 352.37853,398.069878 352.637347,398.069878 C353.779869,398.069878 354.706067,397.143162 354.706067,396 C354.706067,395.741039 354.658538,395.493184 354.571732,395.264694 Z M352.637347,393.102171 C353.038396,393.102171 353.420405,393.183732 353.767711,393.331181 L353.113972,393.985327 C352.960956,393.949224 352.801381,393.930122 352.637347,393.930122 C351.494825,393.930122 350.568627,394.856838 350.568627,396 C350.568627,396.164126 350.587719,396.323791 350.623801,396.476892 L349.970021,397.130997 C349.822655,396.783497 349.741139,396.401273 349.741139,396 C349.741139,394.399573 351.037816,393.102171 352.637347,393.102171 Z"
              fill="#d2d2d2"
            ></path>
          </svg>
        </span>
      </div>
    </div>
    <div class="view">
      <div v-show="isShow">
        <span class="van-ellipsis" v-for="(item, index) in list" :key="index">
          {{ item }}
        </span>
      </div>
      <div v-show="!isShow" class="hid">当前搜索发现已隐藏</div>
    </div>
  </div>
</template>

<script>
// import instance from '../../../api/request.js'
import random from "../../plugins/random.js";
import axios from "axios";

export default {
  name: "Search",
  data() {
    return {
      list: [],
      index: "",
      isShow: true,
    };
  },
  created() {
    this.fn_getData();
    this.index = this.list[random(0, this.list.length)];
  },
  methods: {
    async fn_getData() {
      let { data } = await axios.get("./pdd.json");
      this.list = data.search;
    },
    fn_show() {
      console.log(1);
      this.isShow = !this.isShow;
    },
    fn_btn() {
      alert("点什么点，买东西去首页！！！");
    },
  },
};
</script>

<style lang="less" scoped>
#search {
  width: 100%;
  .search-wrapper {
    width: 100%;
    height: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.14rem 0.28rem 0.14rem 0.28rem;
    .goBack svg {
      width: 0.2rem;
      height: 0.4rem;
    }
    .van-search__content {
      width: 5.44rem;
      border-radius: 0.16rem;
    }
    .search-btn {
      border: none;
      font-size: 0.32rem;
      height: 0.72rem;
      line-height: 0.72rem;
      color: #e02e24;
      cursor: pointer;
    }
  }
  .search-view {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: normal;
    margin-right: 0.28rem;
    h2 {
      margin: 0.32rem 0.28rem 0.28rem 0.28rem;
      height: 0.42rem;
      line-height: 0.42rem;
      font-size: 0.3rem;
      color: #9c9c9c;
      svg {
        width: 0.3rem;
        height: 100%;
        margin-right: 0.12rem;
      }
    }
    .hid svg {
      width: 0.32rem;
      height: 0.22rem;
    }
  }
  .view {
    width: 100%;
    padding: 0 0.12rem 0 0.28rem;
    display: flex;
    flex-wrap: wrap;
    span {
      display: inline-block;
      min-width: 1.02rem;
      height: 0.64rem;
      line-height: 0.64rem;
      padding: 0 0.22rem 0 0.2rem;
      margin: 0 0.16rem 0.16rem;
      border-radius: 0.32rem;
      background: #f4f4f4;
      text-align: center;
      font-size: 0.28rem;
      cursor: pointer;
      color: #58595b;
      max-width: 2.4rem;
    }
    .hid {
      width: 100%;
      padding-top: 0.48rem;
      text-align: center;
      color: #9c9c9c;
      font-size: 0.28rem;
    }
  }
}
</style>
